<template>
	<view class="index">
		<div class="top">
			<span @click="currentIndex = 0" :class="{active:currentIndex == 0}">浮力兑图</span>
			<span @click="currentIndex = 1" :class="{active:currentIndex == 1}">扭蛋兑图</span>
			<span @click="currentIndex = 2" :class="{active:currentIndex == 2}">扭赠兑图</span>
		</div>
		<div class="giveaway-change">
			<select name="" id="" class="select">
				<option value="12">xx扭蛋馆6期扭赠</option>
			</select>
		</div>
		<div class="giveaway-list">
			<div class="giveaway-item">
				<img src="@/static/egg/egglist.png" alt="">
				<div class="name">扭蛋一</div>
			</div>
			<div class="giveaway-item">
				<img src="@/static/egg/egglist.png" alt="">
				<div class="name">扭蛋一</div>
			</div>
			<div class="giveaway-item">
				<img src="@/static/egg/egglist.png" alt="">
				<div class="name">扭蛋一</div>
			</div>
			<div class="giveaway-item">
				<img src="@/static/egg/egglist.png" alt="">
				<div class="name">扭蛋一</div>
			</div>
			<div class="giveaway-item">
				<img src="@/static/egg/egglist.png" alt="">
				<div class="name">扭蛋一</div>
			</div>
			<div class="giveaway-item">
				<img src="@/static/egg/egglist.png" alt="">
				<div class="name">扭蛋一</div>
			</div>
			<div class="giveaway-item">
				<img src="@/static/egg/egglist.png" alt="">
				<div class="name">扭蛋一</div>
			</div>
			<div class="giveaway-item">
				<img src="@/static/egg/egglist.png" alt="">
				<div class="name">扭蛋一</div>
			</div>
		</div>
		<div class="collect">
			<span>收集度</span>
			<van-progress style="width:234px" color="#0093D8" track-color="#081C26" stroke-width="8" :percentage="25" />
			<span>9/30</span>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentIndex:1
			}
		},
		methods: {
		}
	}
</script>

<style lang="postcss" scoped>
.index {
	width: 100vh;
	background: url(@/static/picture/bg.png) center center no-repeat;
	background-size: cover;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	font-family: "Source Han Sans";
	padding-bottom: 200upx;
	.top {
		width: 100%;
		height: 88upx;
		margin-top:80upx;
		background: rgba(35, 40, 51, 0.2);
		display:flex;
		color: #9CA0A3;
		align-items: center;
		justify-content: space-around;
		font-size:28upx;
		span {
			height: inherit;
			display: flex;
			align-items: center;
		}
		.active {
			color: #fff;
			font-weight: bold;
			background: url(@/static/picture/gou.png) center 33px no-repeat;
			background-size: 50%;
		}
	}
	.giveaway-change {
		display: flex;
		justify-content: flex-start;
		width: 100%;
		margin-top: 40upx;
		.select {
			width: 370upx;
			height: 56upx;
			border-radius: 12upx;
			border: 1px solid rgba(156, 160, 163, 0.6);
			margin-left: 24upx;
			background: rgba(156, 160, 163, 0);
			color: #fff;
		}
	}
	.giveaway-list {
		display: flex;
		flex-wrap: wrap;
		gap:40upx;
		padding: 32upx;
		margin-top: 16upx;
		.giveaway-item {
			width: 200upx;
			height: 206upx;
			font-size:12px;
			text-align:center;
			.name {
				padding-top: 16upx;
				color: #fff;
			}
			img {
				width: 100%;
				display: block;
				border: 1px solid #0093D8;
				border-radius: 16upx;
			}
		}
	}
	.collect {
		width: 670upx;
		height: 76upx;
		border-radius: 16upx;
		background: linear-gradient(270deg, #081C26 0%, rgba(19, 50, 65, 0) 100%);
		margin: 0 auto;
		display: flex;
		color: #fff;
		align-items: center;
		font-size: 12px;
		justify-content: space-around;
	}
}

</style>
